<!-- 密码修改 -->
<template>
  <div class="edit">
    <div class="login-box">
      <ul class="title">
        <li>修改登录密码</li>
        <li>欢迎来到音乐在线阅卷</li>
      </ul>
      <el-form :label-position="labelPosition" :model="formLabelAlign">
        <el-form-item label="旧密码">
          <img src="@/assets/images/login.png" class="icons" />
          <el-input
            v-model="formLabelAlign.account"
            placeholder="请输入旧密码"
            type="password"
            :style="{ borderColor: index == 1 ? 'red' : '' }"
            @focus="index = 1"
            @blur="index = 0"
          ></el-input>
        </el-form-item>

        <el-form-item label="新密码">
          <img src="@/assets/images/login.png" class="icons" />
          <el-input
            v-model="formLabelAlign.password"
            placeholder="请输入新密码"
            type="password"
            :style="{ borderColor: index == 2 ? 'red' : '' }"
            @focus="index = 2"
            @blur="index = 0"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认新密码">
          <img src="@/assets/images/login.png" class="icons" />
          <el-input
            v-model="formLabelAlign.authorization"
            placeholder="请输入新密码"
            type="password"
            :style="{ borderColor: index == 3 ? 'red' : '' }"
            @focus="index = 3"
            @blur="index = 0"
          ></el-input>
        </el-form-item>
        <el-button round class="btn" type="danger" @click="editPassword"
          >确认修改</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { passWordEdit } from "@/api/apiData";
import { mapMutations } from "vuex";
export default {
  name:'editPassword',
  components: {},
  data() {
    return {
      index: 0,
      labelPosition: "top",
      formLabelAlign: {
        account: "",
        password: "",
        authorization: "",
      },
    };
  },
  computed: {},
  methods: {
    ...mapMutations(["setToken"]),
    editPassword() {
      const that = this;
      const { formLabelAlign } = that;
      try {
        for (let i in formLabelAlign) {
          if (formLabelAlign[i].replace(/[, ]/g, "") == "") {
            throw new Error(i);
          }
        }
      } catch (e) {
        let message;
        switch (e.message) {
          case "account":
            message = "请输入旧密码";
            break;
          case "password":
            message = "请输入新密码";
            break;
          case "authorization":
            message = "请输入新密码";
            break;
        }
        this.$message({
          type: "warning",
          message: message,
        });
        return;
      }
      if (formLabelAlign.password !== formLabelAlign.authorization) {
        this.$message({
          type: "warning",
          message: "两次输入的新密码不一致",
        });
        return;
      }
      let obj = {
        current_password: formLabelAlign.account,
        password: formLabelAlign.password,
        repassword: formLabelAlign.authorization,
      };
      passWordEdit(obj, false).then((res) => {
        //(res);
        if (res.code == 1) {
          that.$message({
            type: "success",
            message: res.msg,
          });
          that.setToken(["", ""]);
          setTimeout(() => {
            that.$router.replace("/login");
          }, 1000);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='less' scoped>
.edit {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f6f9fc;
  position: relative;
  .login-box {
    position: absolute;
    top: 5vh;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 38px;
    padding: 1% 5% 2%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .title {
      font-size: 35px;
      color: @main-color;
      margin-bottom: 5%;
      font-weight: bold;
      line-height: 1.5;
    }
    .icons {
      width: 42px;
      height: 42px;
      align-self: start;
    }
    /deep/.el-form-item {
      position: relative;
      margin-bottom: 50px;
    }
    /deep/.el-form-item__label {
      font-size: 25px;
      color: #373737;
      position: absolute;
      left: 70px;
      top: -1px;
      font-weight: bold;
    }
    .el-input {
      border-bottom: 1px solid #000;
      margin-top: 20px;
    }
    /deep/.el-input__inner {
      border: 0;
      border-radius: 0;
      padding: 0;
      font-size: 25px;
    }
    /deep/.btn {
      display: block;
      background: linear-gradient(to right, #ff8375, #d74939);
      width: 60%;
      margin: 0 auto;
      height: 60px;
      border-radius: 50px;
      font-size: 30px;
      margin-top: 70px;
    }
  }
}
</style>